<template>
  <div id="app">
    <!-- 基于css的动画
    name-动画名称，检测以name为前缀写的相关的动画设置
    -->
    <transition :name="transitionName">
      <router-view class="child-view"/>
    </transition>

    <!-- 页签 tabBar -->
    <!-- 使用 v-model 指令来选中对应的 tab 
    根据selectLabel的值来匹配哪个项被选中
    :data-绑定页签真正的数据,显示文字，图标
    @change-change事件，页签来回切换时的处理，如要切换路由了
    -->
    <cube-tab-bar v-model="selectLabel" @change="changeHandler" show-slider>
      <!-- 自定义tabs 给购物车项，加个购物车总量的小图标 -->
      <cube-tab v-for="(item,index) in tabs" :key="index" :icon="item.icon" :label="item.value">
        <span>{{item.label}}</span>
        <span class="badge" v-if="showBadge(item.label)">{{cartTotal}}</span>
      </cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      selectLabel: "/", //默认路由地址，默认页签
      tabs: [
        {
          label: "首页",
          value: "/", //页签对应的值，也就是路由path的值
          icon: "cubeic-home"
        },
        {
          label: "购物车",
          value: "/cart", //页签对应的值，也就是路由path的值
          icon: "cubeic-mall"
        },
        {
          label: "关于我",
          value: "/login", //页签对应的值，也就是路由path的值
          icon: "cubeic-person"
        }
      ],
      transitionName: 'route-forward'
    };
  },
  watch: {
    //路由发生变化时，同时同步tabs选中
    //页面没有刷新，由编程的方式 改变了路由，created
    //无法正确反映，此时用watch监听
    //watch  $route的值，接收最新的路由
    $route(route) {
      console.log("$route", route);
      this.selectLabel = route.path;

      //动态的设置动画方式
      this.transitionName = this.$router.transitionName;
    }
  },
  created() {
    //初始化页签设置，页面刷新时才有效，使 图标位置正常
    console.log("页签路由路径", this.$route.path);
    this.selectLabel = this.$route.path;
  },
  computed: {
    //拿出gtters的isLogin属性，做登陆状态的判断
    ...mapGetters(["isLogin", "cartTotal"])
  },
  methods: {
    logout() {
      this.$http.get("/api/logout");
    },
    changeHandler(val) {
      //参数val这个值决定了当前点击了哪个页签，也就是对应的value
      console.log("vvvvvvvvv", val);

      this.$router.push(val);
    },
    showBadge(label) {
      console.log('label',label);
      
      //购物车页签，显示 数量的小icon
      return label == "购物车" && this.cartTotal > 0;
    }
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.cube-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #edf0f4;
}
.cube-tab-bar-slider {
  // top: 0;
}

/* alt+shit+a 页面的滑动动画 */
/* 入场前,页面先藏到舞台的外面 */
.route-forward-enter {
  transform: translate3d(-100%, 0, 0);
}

.route-back-enter {
  transform: translate3d(100%, 0, 0);
}
/* 出场后的状态 */
.route-forward-leave-to {
  transform: translate3d(100%, 0, 0);
}

.route-back-enter {
  transform: translate3d(-100%, 0, 0);
}
/* 播放动画过程中, */
.route-forward-enter-active,
.route-forward-leave-active {
  transition: transform 0.3s;
}

.route-back-enter-active,
.route-back-leave-active {
  transition: transform 0.3s;
}

/* 解决切换页面时。跳动bug */
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  padding-bottom: 36px;
  width: 100%;
}

.badge {
  background: red;
  border-radius: 10px;
  color: #fff;
}
</style>
